import './Scss/PersonnelStatistics.scss'

import { Http } from '../../../../Common/Api'
import { useRequest, useBoolean, useSize } from 'ahooks'
import { useState, useEffect, useRef } from 'react'
import { Pie, Bar } from '@ant-design/plots'
import dayjs from 'dayjs'
import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'

export const PersonnelStatistics001 = () => {
    const { run: geyPersonStatPersonTypeStatAttendance } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let number = 0
            let list = []
            res.list.forEach(({ uuid, tableName, personCount }) => {
                number += personCount
                list = [...list, { uuid, type: tableName, value: personCount }]
            })
            setNumber(number)
            setData(list)
        },
    })
    useEffect(() => {
        geyPersonStatPersonTypeStatAttendance({
            url: `getPersonStatPersonTypeStatAttendance`,
            data: { date: dayjs().format('YYYY-MM-DD') },
        })
    }, [geyPersonStatPersonTypeStatAttendance])

    const [number, setNumber] = useState(0)
    const [Color] = useState(['#07CCB0', '#BFFFA7', '#FF817C', '#ACCDFF', '#B9ECED'])
    const [Data, setData] = useState([])
    const [Charts, setCharts] = useState()

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        const config = {
            autoFit: false,
            width: 212,
            height: 212,
            data: Data,
            angleField: 'value',
            colorField: 'type',
            color: Color,
            radius: 1,
            innerRadius: 0.6,
            interactions: [{ type: 'element-default' }],
            label: false,
            tooltip: false,
            legend: false,
            statistic: {
                title: {
                    offsetY: 5,
                    style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                    content: number,
                },
                content: {
                    offsetY: 10,
                    style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                    content: '总人数',
                },
            },
            pieStyle: { lineWidth: 0 },
        }
        setCharts(config)
    }, [Color, Data, number])

    return (
        <div className="PersonnelStatistics001">
            {Charts && (
                <Pie
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { uuid } = e.data.data
                            setParameter({
                                other: { type: uuid },
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplate',
                            })
                            setTrue()
                        })
                    }
                />
            )}
            <div className="Table">
                {Data.map(({ uuid, type, value }, index) => (
                    <div
                        key={uuid}
                        onClick={() => {
                            setParameter({
                                other: { type: uuid },
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplate',
                            })
                            setTrue()
                        }}
                    >
                        <div style={{ color: Color[index] }}>{type}</div>
                        <div>{value} 人</div>
                    </div>
                ))}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="人员统计明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}

export const PersonnelStatistics101 = () => {
    const { run: geyPersonStatPersonTypeStatAttendance } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            let number = 0
            let list = []
            res.list.forEach(({ dictionaryTypeUuid, dictionaryName, scienceCount }) => {
                number += scienceCount
                list = [...list, { uuid: dictionaryTypeUuid, type: dictionaryName, value: scienceCount }]
            })
            setNumber(number)
            setData(list)
        },
    })
    useEffect(() => {
        geyPersonStatPersonTypeStatAttendance({
            url: `getProgressGetScienceInfoByType`,
        })
    }, [geyPersonStatPersonTypeStatAttendance])

    const [number, setNumber] = useState(0)
    const [Color] = useState(['#07CCB0', '#BFFFA7', '#FF817C', '#ACCDFF', '#B9ECED'])
    const [Data, setData] = useState([])
    const [Charts, setCharts] = useState()

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    useEffect(() => {
        const config = {
            autoFit: false,
            width: 212,
            height: 212,
            data: Data,
            angleField: 'value',
            colorField: 'type',
            color: Color,
            radius: 1,
            innerRadius: 0.6,
            interactions: [{ type: 'element-default' }],
            label: false,
            tooltip: false,
            legend: false,
            statistic: {
                title: {
                    offsetY: 5,
                    style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                    content: number,
                },
                content: {
                    offsetY: 10,
                    style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                    content: '总数',
                },
            },
            pieStyle: { lineWidth: 0 },
        }
        setCharts(config)
    }, [Color, Data, number])

    return (
        <div className="PersonnelStatistics001">
            {Charts && (
                <Pie
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', () => {
                            setParameter({
                                uuid: '',
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplate',
                            })
                            setTrue()
                        })
                    }
                />
            )}
            <div className="Table">
                {Data.map(({ uuid, type, value }, index) => (
                    <div
                        key={uuid}
                        onClick={() => {
                            setParameter({
                                uuid: uuid,
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplate',
                            })
                            setTrue()
                        }}
                    >
                        <div style={{ color: Color[index] }}>{type}</div>
                        <div>{value}</div>
                    </div>
                ))}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="人员统计明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}

export const PersonnelStatistics002 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'value',
                yField: 'type',
                seriesField: 'name',
                color: ['#B3FCFE', '#71A8FF'],
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                yAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                    title: {
                        text: '工区',
                        position: 'start',
                        autoRotate: false,
                        offset: 0,
                        style: { fill: '#B2FBFD' },
                    },
                },
                xAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    const { run: getPersonStatGetPersonTypeStatAttendanceByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ tableName, personCount, attendanceCount, uuid }) => {
                data = [...data, { name: '进场人数', type: tableName, value: personCount, organizationUuid: uuid }]
            })
            setData(data)
        },
    })

    useEffect(() => {
        getPersonStatGetPersonTypeStatAttendanceByOrg({
            url: 'getPersonStatGetPersonTypeStatAttendanceByOrg',
            data: {
                OrgType: 6,
                Date: dayjs().format('YYYY-MM-DD'),
            },
        })
    }, [getPersonStatGetPersonTypeStatAttendanceByOrg])

    return (
        <div className="PersonnelStatistics002" ref={ChartsBox}>
            {Charts && (
                <Bar
                    {...Charts}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            console.log(data)
                            setParameter({
                                uuid: data.organizationUuid,
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplateTwo',
                            })
                            setTrue()
                        })
                    }
                />
            )}
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="人员统计明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}
